import React, { useState, useEffect } from 'react'
import "./index.less";
import Icon from "./icon.png";
import Less10kb from "./less10kb.png";
import { TestHMR } from 'TestHMR'
// import { Button } from 'roftUi'
// console.log(Button);

const LazyComponent = React.lazy(() => import('./add'));

const Support = ({ isSupport, children, ...rest }) => {
  return isSupport && <div className='animate__animated animate__fadeInUp' {...rest}>{children}</div> || null
}
const Image = ({ src, alt, style }) => {
  return <img src={src} style={{ width: "100%", height: "100%", ...style }} alt={alt || src} />
}

const TechnologyStackSupport = () => {
  function type(obj) {
    let result = Object.prototype.toString.call(obj)
    result = /[A-Z]\w+/.exec(result)[0].toLocaleLowerCase()
    return result
  }
  const [isHooks,] = useState(true)
  const [isLess, setIsLess] = useState(false)
  const [isDynamic, setDynamic] = useState(false)
  const [isFetch, setFetch] = useState(false)

  const isPromise = type(new Promise(function () { })) === 'promise'
  let isAsyncAwait = false; (async () => { isAsyncAwait = true })()
  const isReact = React.isValidElement(React.createElement())
  const hello = target => { target.hello = true }
  @hello
  class Person { }
  const isClass = String(new Person().constructor).match(/class/).length
  const isDecorator = Boolean(Person.hasOwnProperty("hello"))
  const isImage = Boolean(Icon)
  const isImageBase64 = Boolean(/^data:image.*base64/.test(Less10kb))
  // const isTrue = window.getComputedStyle(document.querySelector('#TechnologyStackSupport'))
  useEffect(() => {
    const div = document.querySelector('#TechnologyStackSupport div')
    div && setIsLess(window.getComputedStyle(div)['font-weight'] === '700');

    (async function add() {
      const { add } = await import(/* webpackChunkName: 'add' */'./add.jsx')
      setDynamic(Boolean(add(1, 2) === 3))
    }).call()

    fetch('https://gitee.com/api/v5/users/roft/repos')
      .then(response => response.json())
      .then(data => {
        setFetch(Boolean(data))
      });
  }, [])

  return (
    <div id="TechnologyStackSupport">
      <Support isSupport={isReact}>支持React、Jsx</Support>
      <Support isSupport={isHooks}>支持Hooks</Support>
      <Support isSupport={isPromise}>支持Promise</Support>
      <Support isSupport={isAsyncAwait}>支持Async/Await语法</Support>
      <Support isSupport={isClass}>支持Class</Support>
      <Support isSupport={isDecorator}>支持Decorator</Support>
      <Support isSupport={isLess}>支持Less</Support>
      <Support isSupport={isImage}>支持图片模块化导入<Image style={{ width: 20 }} src={Icon} /></Support>
      <Support isSupport={isImageBase64}>支持图片base64转换<Image style={{ width: 20 }} src={Less10kb} /></Support>
      <Support isSupport={isDynamic}>支持动态加载</Support>
      <Support isSupport={isFetch}>支持Fetch</Support>
      <Support isSupport={true}>支持模块热替换(<TestHMR />)</Support>
      <React.Suspense fallback={<div>Loading...</div>}>
        <Support isSupport={<LazyComponent />}>支持Suspense、React.lazy</Support>
      </React.Suspense>

      {/* <Button>roftUi-Button</Button>2*/}
    </div>
  )
}
export default TechnologyStackSupport

// if (module.hot) {
//   module.hot.accept()
// }


// // import "core-js";
// //Promise
// function test() {
//   new Promise(function () { })
// }
// test()
// //箭头函数
// const arr = [1, 2, 3, 4].map(item => item * item)
// console.info(arr.includes(1))

// console.log(arr)

// polyfill使用方案：corejs: { version: 2 }
// 只用babel-loader 没有变化
// 增加@babel/preset-env const和箭头函数被编译了 promise没被转换
// 增加corejs2 useBuiltIns: 'entry' 发现200kb的core-js/modules被完全导入到开头
// 修改useBuiltIns: 'usage'，增加corejs: { version: 2 } targets: {browsers: ["last 1 version"]} 30kb,ps:💥重要发现在package.json里browerlist配不生效果
// 修改targets: {browsers: ["last 1 chrome version"]} ）0kb 不需要polyfill了😊

// 增加@babel/plugin-transform-runtime和@babel/runtime，"corejs": 3，发现Promise被替换了,它使用了帮助函数,并且赋予了别名(沙箱垫片),抽出为公共方法,实现复用。core-js-pure 78kb

// 总结：browers根据浏览器过滤一次，usage根据代码使用情况再过滤一次
// 默认使用@babel/runtime，但是corejs配置为2时，应该改为使用@babel/runtime-corejs2。
// 两种polyfill方案，一种是babel-plugin-transform-runtime的沙箱垫片方案（库），一种是preset-env的全局垫片方案（应用）。原因是库一般不要去依赖第三方公共库，可能会与应用造成依赖版本冲突，所以要么沙箱垫片，
// 要么在文档里提醒，请用户自行polyfill。应用的话不用考虑这么多，全是自己的地盘，尽管引入标准中已经支持的全局变量。
// 方案一：@babel/preset-env + @babel/polyfill
// 方案二：@babel/preset-env + @babel/plugin-transform-runtime + @babel/runtime-corejs2
// 升级：需要 babel-loader 版本升级到 8.0.0 以上，@babel/core 版本升级到 7.4.0 及以上。
// 方案一升级：@babel/preset-env + core-js + regenerator-runtime
// 方案二升级：@babel/preset-env + @babel/plugin-transform-runtime + @babel/runtime-corejs3

// window.Promise = window.Promise || Promise;
// 后续阅读： https://blog.csdn.net/weixin_33743703/article/details/91362067 corejs与env、runtime的不解之缘
// https://segmentfault.com/a/1190000020237817


// 如果一个项目很慢，可以在开发阶段使用最新浏览器，禁止polyfill。